<style lang="less">
    .search-filter-wrap {
        display: flex;
        margin-bottom: 15px;
        font-size: 12px;

        &:last-child {
            margin-bottom: 0;
        }

        .search-picker-title {
            font-weight: 500;
            line-height: 20px;
            /*width: 150px;*/
            margin-right: 15px;
            color: rgba(0, 0, 0, .85);
        }

        .search-picker-item-group {
            flex: 1;
            span{

            }
            line-height: 1.2rem;
            padding-bottom: 0.5rem;
        }

        .picker-item {
            cursor: pointer;
            margin-right: 8px;
            padding: 1px 4px;
            border-radius: 2px;
            transition: 0.2s;

            &:hover, &.selected {
                background: #FFA000;
                color: #FFF;
            }

        }

        .search-input {
            width: 50% !important;
        }
    }
</style>
<template>
  <el-col :span="span">
    <div class="search-filter-wrap">
      <div class="search-picker-title">{{ title }}</div>
      <div v-if="type==='tag'" class="search-picker-item-group">
        <span
          class="picker-item"
          :class="{selected: isEmpty}"
          style="display: inline-block;"
          @click="clear"
          v-text="$t('all')"
        />
        <span
          v-for="d of datas"
          :key="d.item_code"
          :class="{selected: isSelected(d)}"
          class="picker-item"
          style="display: inline-block;"
          @click="change(d)"
        >{{ d.item_text }}</span>
        <slot />
      </div>
      <div v-if="type==='input'" class="search-picker-item-group">
        <span>
          <el-input
            v-model="text"
            class="search-input"
            :placeholder="$t('search')"
            size="mini"
            style="border: 1px solid #e1e3e5;"
          />
        </span>
      </div>
      <div v-if="type==='search'" class="search-picker-item-group">
        <span>
          <el-input
            v-model="text"
            class="search-input"
            :placeholder="$t('search')"
            size="mini"
            style="border: 1px solid #e1e3e5;"
          />
          <el-button
            type="primary"
            size="mini"
            @click="searchData"
            v-text="$t('searchBtn')"
          />
          <el-button
            type="primary"
            size="mini"
            @click="reset"
            v-text="$t('reset')"
          />
        </span>
      </div>
      <div v-show="type==='select'" class="search-picker-item-group">
        <span>
          <el-select
            v-model="data"
            :multiple="multiple"
            placeholder="please choose"
            :value-key="valueKey"
            size="mini"
            @change="selectChange"
          >
            <el-option
              v-for="item in datas"
              :label="item.item_text"
              :value="item.item_code"
            />
          </el-select>
        </span>
      </div>
    </div>
  </el-col>
</template>

<script>

import { deepClone } from '../../util/util'

export default {
  name: 'SearchFilter',
  props: {
    title: String,
    datas: {
      type: Array,
      default: () => {
        return []
      }
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    prop: String,
    value: Object,
    type: {
      type: String,
      default: 'tag'
    },
    span: {
      type: Number,
      default: 24
    },
    inline: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    search: {
      type: Boolean,
      default: false
    },
    range: {
      type: Boolean,
      default: false
    },
    display: {
      type: String,
      default: 'none'
    }
  },
  data() {
    return {
      text: null,
      data: ''
    }
  },
  computed: {
    isEmpty() {
      if (this.range) {
        return !this.nowValue.max && !this.nowValue.min
      } else if (this.multiple) {
        return !this.nowValue || this.nowValue.length === 0
      } else {
        return !this.nowValue
      }
    },
    nowValue() {
      if (this.value) { return this.value[this.prop] }
    }
  },
  created() {
  },
  methods: {
    isSelected(data) {
      if (this.range) {
        return data.max == this.nowValue.max && data.min == this.nowValue.min
      } else if (this.multiple) {
        if (this.nowValue) { return this.nowValue.indexOf(data.item_code) > -1 }
        return false
      } else {
        return this.nowValue == data.item_code
      }
    },
    change(data) {
      let result = null
      if (this.range) {
        result = { max: data.max, min: data.min }
      } else if (this.multiple) {
        if (!this.nowValue) {
          result = []
        } else {
          result = deepClone(this.nowValue)
        }
        this.toggleValue(result, data.item_code)
      } else {
        result = data.item_code
      }
      this.setValue(result)
    },
    selectChange(data) {
      let result = null
      result = deepClone(data)
      this.setValue(result)
    },
    toggleValue(list, value) {
      if (!this.isArray(list)) return [value]
      if (list.some(item => item == value)) {
        list.splice(list.indexOf(value), 1)
      } else {
        list.push(value)
      }
    },
    isArray: function(input) {
      return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]'
    },
    clear() {
      if (this.range) {
        this.setValue({ min: null, max: null })
      } else if (this.multiple) {
        this.setValue([])
      } else {
        this.setValue(null)
      }
    },
    setValue(data) {
      const value = deepClone(this.value)
      value[this.prop] = data
      this.$emit('input', value)
    },
    searchData() {
      this.setValue(this.text)
    },
    reset() {
      this.text = ''
      this.$emit('input', {})
    }
  }
}
</script>

<style scoped>

</style>
